<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require('echarts/theme/macarons')
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'temperature-bar'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          show: true,
          text: '本月每日温度变化',
          x: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b0}: {c0}℃'
        },
        grid: {
          top: '15%',
          left: '12%',
          right: '5%',
          bottom: '8%'
          // containLabel: true
        },
        yAxis: {
          axisLine: {
            show: false,
            color: '#fff'
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '14'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#285abc'
            }
          },
          splitLine: {
            show: false
          }
        },
        xAxis: [
          {
            axisTick: 'none',
            axisLine: 'none',
            offset: '27',
            data: ['10日', '12日', '13日', '14日', '15日', '16日', '17日'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#285abc',
                fontSize: '14'
              },
              lineHeight: 55
            }
          },
          {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              show: false
            },
            data: [0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '单位：件',
            nameGap: '50',
            data: []
          }
        ],
        series: [
          {
            name: '℃',
            type: 'bar',
            xAxisIndex: 0,
            data: [22, 25, 22, 33, 29, 28, 27],
            barWidth: 5,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#93FE94'
                  },
                  {
                    offset: 0.5,
                    color: '#E4D225'
                  },
                  {
                    offset: 1,
                    color: '#E01F28'
                  }
                ])
              }
            },
            z: 2
          },
          {
            name: '温度背景框',
            type: 'bar',
            xAxisIndex: 1,
            barGap: '-100%',
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 8,
            itemStyle: {
              normal: {
                color: '#0e2147',
                barBorderRadius: 5
              }
            },
            z: 1
          },
          {
            name: '外框',
            type: 'bar',
            xAxisIndex: 2,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100],
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#4577BA',
                barBorderRadius: 50
              }
            },
            z: 0
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0],
            xAxisIndex: 2,
            symbolSize: 15,
            itemStyle: {
              normal: {
                color: '#93FE94',
                opacity: 1
              }
            },
            z: 2
          },
          {
            name: '白圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0],
            xAxisIndex: 1,
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: '#0C2E6D',
                opacity: 1
              }
            },
            z: 1
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0],
            xAxisIndex: 2,
            symbolSize: 23,
            itemStyle: {
              normal: {
                color: '#4577BA',
                opacity: 1
              }
            },
            z: 0
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.temperature-bar {
  position: relative;
  z-index: 999;
}
</style>
